<template>
  <div>
    <h1>我计算的是加法，我要算的数字是{{count}}</h1>
    <h6>{{setNum}}</h6>
    <div>
      <span>简单的加减</span>
      <button @click="addHandle">+</button>
    </div>
    <div>
      <span>成倍加减</span>
      <button @click="addMoreHandle">+</button>
    </div>
    <div>
      <span>异步加减</span>
      <button @click="addAsyncHandle">+</button>
    </div>
    <div>
      <span>异步成倍加减</span>
      <button @click="addAMoreHandle">+</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'add',
  data() {
    return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['setNum'])
  },
  methods: {
    ...mapMutations(['addFun']),

    // 简单的加法
    addHandle() {
      // this.$store.commit('addFun')
      this.addFun()
    },

    // 成倍加减
    ...mapMutations(['addFunMore']),
    addMoreHandle() {
      // this.$store.commit('addFunMore', 3)
      this.addFunMore(3)
    },

    // 异步加减
    ...mapActions(['']),
    addAsyncHandle() {
      this.$store.dispatch('addAsync')
    },
    // 异步成倍加减
    ...mapActions(['addAMore']),
    addAMoreHandle() {
      this.addAMore(5)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
